<template>
  <div>
    <todoForm @addTodo="addTodo" />
    <todoList :todos="todos" @removeItem="removeItem" />
  </div>
</template>

<script>
import todoForm from './ui/todoForm.vue'
import todoList from './ui/todoList.vue'
export default {
  components: {
    todoForm,
    todoList
  },
  data() {
    return {
      todos: []
    }
  },
  methods: {
    addTodo(item) {
      this.todos.push(item)
    },
    removeItem(index) {
      this.todos.splice(index, 1)
    }
  }
}
</script>

<style lang="scss" scoped></style>
